<div class="layui-row">
  <div class="layui-col-lg5">
    <form class="layui-form">
      <div class="layui-form-item" >
        <div class="layui-inline">
          <input type="radio"  name="approve_kind" title="待审批" value="wait" lay-filter='approve_filter' >
          <input type="radio"  name="approve_kind" title="已审批" value="complete" lay-filter='approve_filter'>
          <input type="radio"  name="approve_kind" title="已通过" value="pass" lay-filter='approve_filter'>
          <input type="radio"  name="approve_kind" title="已驳回" value="reject" lay-filter='approve_filter'>
          <input type="radio"  name="approve_kind" title="全部" value="all" lay-filter='approve_filter' checked="">
        </div>
      </div>
    </form>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="设备ID/名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<!-- 表格操作栏内容 -->
<script type="text/html" id="table_info_handle_bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">审核</a>
  <a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="del">取钥匙</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="re_submit">还钥匙</a>
</script>

<script type="text/html" id="table_header">
  <p>用车申请审核管理表</p>
</script>

<!-- 修改数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 10px;display: none;">
  <div class="layui-row">
    <div class="layui-col-md3">

      <div class="layui-form-item" style="display: none;">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">申请人</label>
          <div class="layui-input-block">
            <input type="text" name="owner" lay-verify="required" lay-reqtext="必填项!" placeholder="用车事由" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">申请人</label>
          <div class="layui-input-block">
            <input type="text" name="applyer" lay-verify="required" lay-reqtext="必填项!" placeholder="用车事由" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">出发地</label>
          <div class="layui-input-block">
            <input type="text" name="start" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="出发地" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">目的地</label>
          <div class="layui-input-block">
            <input type="text" name="end" readonly="" lay-verify="required" lay-reqtext="必填项!" placeholder="目的地" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">用车事由</label>
          <div class="layui-input-block">
            <input type="text" name="purpose" lay-verify="required" lay-reqtext="必填项!" placeholder="用车事由" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">乘车人数</label>
          <div class="layui-input-block">
            <input id="passenger" type="text" name="passenger" lay-verify="required" lay-reqtext="必填项!" placeholder="用车事由" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">用车时间</label>
          <div class="layui-input-block">
            <input type="text" id="change_time_use" name="time_use" lay-verify="required" lay-reqtext="必填项!"  autocomplete="off" placeholder="用车时间" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item" >
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green" >使用车辆</label>
          <div class="layui-input-block" >
            <input id="change_car" name="car" type="text" list="change_car_list"  name="tml_serch"  placeholder="选择车辆" autocomplete="off" class="layui-input">
              <datalist id="change_car_list"></datalist>
              <a style="position: absolute;right: 0;" class="layui-btn layui-btn-xs" onclick="car_filter('recommand',$('#passenger').val())">推荐车辆</a>
              <a style="position: absolute;right: 35%;" class="layui-btn layui-btn-xs" onclick="car_filter('all')">全部车辆</a>
              <a style="position: absolute;right: 70%;" class="layui-btn layui-btn-xs" onclick="show_detail($('#change_car').val())">车辆详情</a>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark" placeholder="备注信息" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item" style="display: none;">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">存储id</label>
          <div class="layui-input-block">
            <input type="text" name="id" placeholder="备注信息" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">驳回原因</label>
          <div class="layui-input-block">
            <input type="text" name="param_set" placeholder="备注信息" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

    </div>

    <div class="layui-col-md9">
      <div id="map_panle">
        <div id="map_box" style="height: 500px;width: 920px"></div>
        <div class="layui-inline" style="position: absolute;top: 5px;left: 0px;">
            <div class="layui-input-inline">
                <input type="text"  id="search_address"  placeholder="搜索地址" autocomplete="off" class="layui-input" style="height: 30px;">
            </div>
            <!-- <div class="layui-form-mid layui-word-aux"></div> -->
            <a type="button" class="layui-btn layui-btn-sm" onclick="search_map($('#search_address').val())">搜索</a>
        </div>
      </div>
    </div>
  </div>
</form>

<!-- 修改数据表单结束 -->


<!-- 车辆数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="car_data_form" lay-filter="car_data_form" style="padding: 10px;display: none;">
  <div class="lauyi-row">
    <div class="layui-col-lg6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">车牌</label>
          <div class="layui-input-block">
            <input readonly="readonly" id="car_name" type="text" name="name" lay-verify="required" lay-reqtext="必填项!" placeholder="必填" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">类别</label>
          <div class="layui-input-block">
            <input type="text" name="kind" placeholder="轿车/货车/电瓶车，自定义" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">车型</label>
          <div class="layui-input-block">
            <input type="text" name="model" placeholder="车型" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">核载人数</label>
          <div class="layui-input-block">
            <input type="text" name="passenger" lay-verify="required" lay-reqtext="必填项!"  placeholder="核载人数" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">部门</label>
          <div class="layui-input-block">
            <input type="text" name="department"  autocomplete="off" placeholder="所在部门" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">司机</label>
          <div class="layui-input-block">
            <input type="text" name="driver"  autocomplete="off" placeholder="司机" class="layui-input">
          </div>
        </div>
      </div>

      
      <div class="layui-form-item" >
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green" >使用设备ID</label>
          <div class="layui-input-inline" >
            <input readonly="" name="device_id" type="text" name="tml_serch"  placeholder="选择设备" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-lg6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">照片</label>
          <div class="layui-input-block">
            <input type="text" name="picture" style="display: none;" value="0">
            <img type="text" name="picture" src="" style="width:180px;height:180px" id="edit_picture">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark" placeholder="备注信息" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>


<!-- 引入把上传的表格转变为json的插件 -->
<script type="text/javascript" src="/static/js/bd_map.js"></script>
<!-- js代码开始 -->

<script type="text/javascript">
if(user_permi==='normal'){
  $('#device_handle_permi').hide()
}

var ajax_url='car_apply_approve'
form.render()

// map.addEventListener('click', function(e){
//   map.clearOverlays()
//   var p=JSON.stringify(e.point)
//   point_kind.value=e.point
//   layer.msg(p)
//   var m=new BMap.Marker(e.point)
//   map.addOverlay(m)
// });


// 展示匹配的车辆详情
var show_detail=function(name){
  if(name==''){
    layer.msg('请选择车辆')
    return false
  }
  var car=filter_func(car_data,'name',name)[0]
  var base_info={};
  base_info['name']=car['name']
  base_info['device_id']=car['device_id']
  base_info['remark']=car['remark']
  var car_detail=eval('('+car.detail+')')
  base_info['kind']=car_detail['kind']
  base_info['model']=car_detail['model']
  base_info['driver']=car_detail['driver']
  base_info['department']=car_detail['department']
  base_info['passenger']=car_detail['passenger']
  // base_info['person_id']=car_detail['person_id']
  var picture_path=car_detail['picture']
  if(picture_path!=='0'){
    $('#edit_picture').attr('src','/static/data_from_web/picture/car/'+car_detail['picture'])
  }
  base_info['picture']=picture_path
  document.getElementById("car_data_form").reset();
  form.val('car_data_form',base_info)
  layer.open({
    type: 1
    ,area:['920px','550px']
    ,offset:'60px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
    ,id: 'car_show' //防止重复弹出
    ,content:$('#car_data_form')
    ,shade: 0 //不显示遮罩
    ,btn: ['关闭']
  })
}

// 筛选车辆
var car_filter=function(kind,key=''){
  var car_show=[];
  console.log(kind,key)
  if(kind==='recommand'){
    for(var i=0;i<car_data.length;i++){
      var passenger=eval('('+car_data[i].detail+')').passenger
      passenger=parseInt(passenger)
      if(passenger>=parseInt(key)){
        console.log(passenger,key)
        car_show.push(car_data[i])
      }
    }
  }else{
    car_show=car_data
  }
  fill_option(car_show,'change_car_list','name','passenger')
}

// 设备数据表格渲染函数

var table_show=function(table_data){ 
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        // {field: 'id', title: 'ID',width:20,sort:true},
        {field: 'start', title: '出发地',sort:true},
        {field: 'end', title: '目的地',sort:true},
        {field: 'purpose', title: '用车事由',sort:true},
        {field: 'passenger', title: '乘车人数',sort:true},
        {field: 'time_use', title: '用车时间',sort:true},
        {field: 'car', title: '使用车辆',sort:true},
        {field: 'status', title: '状态',sort:true,templet:function(d){
          var value=d.status
          var param_set=eval('('+d.param_set+')')
          if(d.status=='审批未通过'){
            value=value+'：'+param_set.reject
          }
          return value
        }},
        {field: 'owner', title: '申请人',sort:true,templet:function(d){
          return sub_user[d.owner].visible_name
        }},
        {field: 'apply_time', title: '申请时间',sort:true},
        {field: 'remark', title: '备注',sort:true},
        {title: '操作', minWidth: 110, templet: function(d){
          var value=''
          var a='<a class="layui-btn layui-btn-xs" lay-event="edit">审核</a>'
          var b='<a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="get_key">取钥匙</a>'
          var c='<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="back_key">还钥匙</a>'
          if(d.status=='已提交，待审批'){
            value=a
          }else if(d.status=='审批通过'){
            var param_set=eval('('+d.param_set+')')
              if(param_set.key_status=='un_get'){
                value=b
              }else if(param_set.key_status=='get'){
                value=c
              }
          }
          return value
        }, fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

var handle_get_func=function(data){
  apply_data=data['apply_data']
  car_data=data['car_data']
  if(data.sub_user){
    data['sub_user'].forEach(item=>{
      sub_user[item.username]=item
    })
  }
  table_show(apply_data)
}

// 首次用户数据加载
var apply_data;
var car_data;
var sub_user={};
// 首次用户数据加载,index页面加载设备和型号信息
get_info_ajax(ajax_url,'get_init_data',handle_get_func)


form.on('radio(approve_filter)',function(obj){
  var kind=obj.value
  var show_data
  // console.log(show_data,apply_data)
  if(kind=='wait'){
    show_data=filter_func(apply_data,'status','已提交，待审批')
  }else if(kind=='complete'){
    show_data=filter_func(apply_data,'status','已提交，待审批','不等')
  }else if(kind=='pass'){
    show_data=filter_func(apply_data,'status','审批通过')
  }else if(kind=='reject'){
    show_data=filter_func(apply_data,'status','审批未通过')
  }else{
    show_data=apply_data
  }
  table_show(show_data)
})

// 监听操作按钮，编辑/启停\
var edit_data_chose
table.on('tool(base_info_manage_table)', function (obj) {

  var result = obj.data;
  result.car=''
  // 申请人的名字由登录名转换成显示名称
  var visible_name=sub_user[result.owner].visible_name
  result.applyer=visible_name
  document.getElementById("edit_data_form").reset();
  var time_use=eval(result.time_use).join(' - ')
  result.time_use=time_use
  form.val('edit_data_form',result)
  
  for(var i=0;i<car_data.length;i++){
    var car_detail=eval('('+car_data[i].detail+')')
    car_data[i].passenger=car_detail.passenger
  }
  fill_raido_func(car_data,'change_car_list','passenger','name')
  form.render()

  if(obj.event=='edit'){
    if(result.status!=='已提交，待审批'){
      layer.msg('不是待审批申请')
      return
    }
    layer.open({
    type: 1
    ,area:['70%','70%']
    ,title:'用车申请审批'
    ,offset:'60px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
    ,id: 'edit_data' //防止重复弹出
    ,content:$('#edit_data_form')
    ,shade: 0 //不显示遮罩
    ,success:function(){
      map.clearOverlays()
      var s_p=result.start.split('&')
      var e_p=result.end.split('&')
      var s_point=new BMap.Point(parseFloat(s_p[1]),parseFloat(s_p[2]))
      var e_point=new BMap.Point(parseFloat(e_p[1]),parseFloat(e_p[2]))
      var start_Icon = new BMap.Icon("/static/img/start.png", new BMap.Size(100,60),{anchor : new BMap.Size(20, 42),imageSize:new BMap.Size(40,40)});
      var end_Icon = new BMap.Icon("/static/img/end.png", new BMap.Size(100,60),{anchor : new BMap.Size(20, 42),imageSize:new BMap.Size(40,40)});
      var s_marker = new BMap.Marker(new BMap.Point(s_p[1],s_p[2]),{icon:start_Icon});
      var e_marker=new BMap.Marker(new BMap.Point(e_p[1],e_p[2]),{icon:end_Icon})
      var s_label=new BMap.Label('出发地-'+s_p[0],{offset:new BMap.Size(-3,-25)});
      var e_label=new BMap.Label('目的地-'+e_p[0],{offset:new BMap.Size(-3,-25)});
      s_marker.setLabel(s_label);
      e_marker.setLabel(e_label);
      map.addOverlay(s_marker)
      map.addOverlay(e_marker)
      var ps=[s_point,e_point]
      setTimeout(function(){map.setViewport(ps);},500)
      
    }
    ,btnAlign: 'c'
    ,btn: ['批准','驳回','关闭']
    ,btn1:function(){
      var base_info=form.val('edit_data_form')
      var car=base_info.car
      if(car==''){
        layer.msg('请指派车辆')
        return false
      }
      car=filter_func(car_data,'name',car)[0]
      if(!car){
        layer.msg('车辆不存在！请重新选择')
        return false
      }
      if(car.status!=='0'){
        layer.msg('车辆已经在使用中，请更换车辆')
        return false
      }
      base_info=package_data(base_info)
      console.log(base_info)
      post_info_ajax(base_info,ajax_url,'pass',handle_get_func)
    }
    ,btn2:function(){
      var base_info=form.val('edit_data_form')
      if(base_info.param_set=='' | base_info.param_set=='0'){
        layer.msg('请填写未批准原因')
        return false
      }
      base_info=package_data(base_info)
      post_info_ajax(base_info,ajax_url,'reject',handle_get_func)
    }
    });
  }else if(obj.event=='get_key'){
    
    layer.open({
    type: 1
    ,title:'请输入取钥匙码'
    ,offset:'60px'  //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
    ,id: 'code_data' //防止重复弹出
    ,content:'<input class="layui-input" id="get_key_code">'
    ,shade: 0 //不显示遮罩
    ,btn: ['确定','关闭']
    ,btn1:function(){
      var base_info=package_data(result)
      base_info['get_key_code']=$('#get_key_code').val()
      console.log(base_info)
      post_info_ajax(base_info,ajax_url,'get_key',handle_get_func)
    }
  })
  }
  else if(obj.event=='back_key'){
    layer.confirm("确定已归还"+result.car+"的钥匙？",
              {btn: ['是', '否']}, 
              function (index) {
                var base_info=package_data(result)
                post_info_ajax(base_info,ajax_url,'back_key',handle_get_func)
              }
              ,function(){
                console.log('no')
                layer.closeAll()
              });
  }
});



//封装数据
var package_data=function(result){
  var time_use=result.time_use.split(' - ')
  time_use=JSON.stringify(time_use)
  result.time_use=time_use
  delete result.applyer
  return result
}




// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    var search_result=search_func(apply_data,search_key,'name','device_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(apply_data)
  }
  return false;
});

//时间范围
laydate.render({
  elem: '#time_use'
  ,type: 'datetime'
  ,range: true
});

laydate.render({
  elem: '#change_time_use'
  ,type: 'datetime'
  ,range: true
});

</script>